.box{
	width: 100px;
	height: 100px;
	background-color: red;
	transition-property: width;
	transition-duration: 2s;
	transition-timing-function: linear;
	transition-delay: 1s;
}
.box:hover{
	width: 400px;
}

.box1{
	width: 100px;
	height: 100px;
	margin-top: 20px;
	background-color: red;
	transition-property: width;
	transition: all 4s linear;
	
}
.box1:hover{
	width: 400px;
}
.box2{
	width: 100px;
	height: 100px;
	margin-top: 20px;
	background-color: red;
	transition-property: width;
	transition: all 4s ease;
	
}
.box2:hover{
	width: 400px;
}
.box3{
	width: 100px;
	height: 100px;
	margin-top: 20px;
	background-color: red;
	transition-property: width;
	transition: all 4s ease-in;
	
}
.box3:hover{
	width: 400px;
}
.box4{
	width: 100px;
	height: 100px;
	margin-top: 20px;
	background-color: red;
	transition-property: width;
	transition: all 4s ease-out;
	
}
.box4:hover{
	width: 400px;
}
.box5{
	width: 100px;
	height: 100px;
	margin-top: 20px;
	background-color: red;
	transition-property: width;
	transition: all 4s ease-in-out;
	
}
.box5:hover{
	width: 400px;
}